<template>
  <div class="box">

    <div class="register">

      <div class="logo">
        <div style="text-align: center;">
          <img src="../assets/logo3.png" width="130px" height="30px" alt="">
        </div>

        <div class="logotext" style="color:rgb(50,99,255)">藏聘</div>
      </div>
      <div style="margin: 20px;">
        <div class="content">
          <el-form :label-position="labelPosition" label-width="80px" :model="userdata" :rules="rules" ref="userdata">
            <el-form-item label="手机号" prop="phone">
              <el-input prefix-icon="el-icon-phone-outline" v-model="userdata.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input show-password prefix-icon="el-icon-lock" v-model="userdata.password"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="repassword">
              <el-input show-password prefix-icon="el-icon-lock" v-model="userdata.repassword"></el-input>
            </el-form-item>

            <el-form-item label="验证码"  prop="code">
              <div style="display:flex">
                <div>
                  <el-input prefix-icon="el-icon-chat-dot-round" v-model="userdata.code"></el-input>
                </div>
                <div >
                  <div
                    @click="getCode()"
                    v-bind:class="{ active: isActive }"
                    class="verifyPhone-button"
                  >
                   <span v-show="isActive">获取</span>
                    <span v-show="!isActive">{{count}}s</span>           
                  </div>

                </div>
              </div>
            </el-form-item>

          </el-form>


          <el-button :loading=loading style="width:98%;margin:20px auto" type="primary"
            @click="submitForm('userdata')">确定注册<i class="el-icon-upload el-icon--right"></i></el-button>
          <div @click="tologin()" style="display:block;width:100%;text-align: center; color: rgb(69, 172, 251);">去登录</div>
        </div>
      </div>
    </div>

  </div>
</template>
  
<script>
const TIME_COUNT = 60;
export default {
  data() {

    var checkPhone = (rule, value, callback) => {
      if (!value) {
        this.flagPhone=false
        return callback(new Error("请输入手机号"));
      }
      setTimeout(() => {
        if (!/(^\d{11}$)/.test(value)) {
          this.flagPhone=false
          callback(new Error("手机号格式不正确"));
        }
        else {
          this.flagPhone=true
          callback();
        }
      }, 1000);
    };

    var checkPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    var checkCode = (rule, value, callback) => {
      if (value === ""||this.userdata.code!=this.realcode) {
        callback(new Error("验证码为空或不正确!"));
      } else {
        callback();
      }
    };

    var checkRePassword = (rule, value, callback) => {
      if (value !== this.userdata.password) {
        callback(new Error("两次密码不一样"));
      } else {
        callback();
      }
    };

    return {
      flagPhone:false,//是否输入手机号
      isActive: true,
      count: 0,
      timer: null,
      loading: false,//按钮加载状态
      rules: {
        phone: [
          { validator: checkPhone, trigger: "blur", required: true }
        ],
        password: [{ validator: checkPassword, trigger: "blur", required: true }],
        code: [{ validator: checkCode, trigger: "blur", required: true }],
        repassword: [{ validator: checkRePassword, trigger: "blur", required: true }],
      },
      labelPosition: 'right',
      userdata: {
        phone: '',
        password: '',
        repassword: "",
        code: '',//表单输入的验证码
      },
      realcode:""//真实验证码
    };
  },
  methods: {
    sendcode(){
      var code=Math.floor(Math.random()*(9999-1000))+1000;
      this.realcode=code
      console.log("当前允许发送验证码为"+code);
      var that=this
          that.$axios
            .post("/api/sms/send", 
             {phone:that.userdata.phone,code:code}
            )
            .then(function (response) {
              console.log(response);
              that.$message.success("验证码已发送请注意查收！");
            })
            .catch(function (error) {
              that.$message.error("验证码发送失败！");
            });
    },
    getCode() {
      if (!this.timer) {
        if(this.flagPhone){
        this.sendcode();
        console.log("发送验证码");
        }else{
          return
        }

        this.count = TIME_COUNT;
        this.isActive = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;

          } else {
            this.isActive = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }else{
          console.log("当前不允许发送验证码");
      }

    },


    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //所有表单验证成功逻辑
          var that = this;
          that.loading = true
          that.$axios
            .post("/api/UserZp/register", {
              phone: this.userdata.phone,
              password: this.userdata.password
            })
            .then(function (response) {
              that.loading = false
              console.log(response);
              if (response.data.code == 200) {
                var info = {
                  phone: that.userdata.phone,
                  password: that.userdata.password,
                };
                localStorage.setItem("info", JSON.stringify(info));

                that.$message.success(response.data.mes);
                that.$router.push("/loginshow");
              } else {
                that.$message.error(response.data.mes);
                that.realcode=""
              }

            })
            .catch(function (error) {
              that.$message.error("网络链接超时");
              that.loading = false
            });

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    tologin() {
      this.$router.push("/loginshow");
    },
    sendbiographical() {
      this.$router.push("/biographical");
    },
  },
};
</script>
  
<style lang="less" scoped>



.logotext {
  font-weight: 800;
  text-align: center;
  font-size: 70px;
}

.box {

  width: 100%;
  height: vh;
  position: relative;
}

.register {

  position: absolute;
  width: 100%;
  height: 300px;
  margin: auto;

}
.verifyPhone-button {                            
                border: .0625rem solid #ccc;               
                background: #f7f7f7;
                color: #999;
                border-radius: .3125rem;
                width: 5.5625rem;
                height: 2.375rem;
                line-height: 2.375rem;
                margin-top: .125rem;
                margin-left: 2.525rem;
                text-align: center;
                font-size: 1rem;
            }
 
            .active {           
                border: .0625rem solid #3980ea;
                background: #fff;
                color: #3980ea;
            }

</style>
  